<template>
	<view class="container">
		<!-- 成功提示 -->
		<view class="success-section">
			<view class="success-icon">
				<text class="checkmark">✓</text>
			</view>
			<text class="success-text">添加成功</text>
		</view>

		<!-- 体重数据卡片 -->
		<view class="data-card">
			<view class="data-main">
				<view class="info-row">
					<view class="weight-line">
						<text class="value">体重：{{ weightData.weight }}</text>
						<text class="unit">kg</text>
					</view>
					<text class="bmi">BMI：{{ weightData.bmi }}</text>
				</view>
				<view class="info-row">
					<text>身高：{{ weightData.height }} cm</text>
					<text class="method">上传方式：{{ weightData.sourceName || '手工录入' }}</text>
				</view>
				<view class="info-row">
					<text class="upload-time">测量时间：{{ weightData.measuredTime }}</text>
				</view>
			</view>
			<view class="status-tag" v-if="weightData.tag" :style="{background: weightData.color}">{{ weightData.tag }}</view>
		</view>

		<!-- 对比数据 -->
		<view class="comparison-section" v-if="comparisonData && (comparisonData.lastFlag!==undefined || comparisonData.tenDaysFlag!==undefined)">
			<view class="comparison-item" v-if="comparisonData.lastFlag==='0'">
				<view class="comparison-icon down" >
					<text>▼</text>
				</view>
				<view class="comparison-content">
					<text class="comparison-value down">{{ comparisonData.lastDiff }}kg</text>
					<text class="comparison-label">比上次({{ comparisonData.lastDate }})</text>
				</view>
			</view>
			<view class="comparison-item" v-if="comparisonData.lastFlag==='1'">
				<view class="comparison-icon up" >
					<text>▲</text>
				</view>
				<view class="comparison-content">
					<text class="comparison-value up">{{ comparisonData.lastDiff }}kg</text>
					<text class="comparison-label">比上次({{ comparisonData.lastDate }})</text>
				</view>
			</view>
			<view class="divider"></view>
			<view class="comparison-item" v-if="comparisonData.tenDaysFlag==='1'">
				<view class="comparison-icon up">
					<text>▲</text>
				</view>
				<view class="comparison-content">
					<text class="comparison-value up">{{ comparisonData.tenDaysDiff }}kg</text>
					<text class="comparison-label">比{{comparisonData.betweenDay}}天前({{ comparisonData.tenDaysDate }})</text>
				</view>
			</view>
			<view class="comparison-item" v-if="comparisonData.tenDaysFlag==='0'">
				<view class="comparison-icon down">
					<text>▼</text>
				</view>
				<view class="comparison-content">
					<text class="comparison-value down">{{ comparisonData.tenDaysDiff }}kg</text>
					<text class="comparison-label">比{{comparisonData.betweenDay}}天前({{ comparisonData.tenDaysDate }})</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getWeight,
		queryDateCompare
	} from '@/api/healthData/everyWeight.js'
	export default {
		data() {
			return {
				weightData: {},
				comparisonData: {},
				weightId: ''
			}
		},
		onLoad(options) {
			if (options.weight) {
				this.weightData.weight = decodeURIComponent(options.weight)
			}
			if (options.height) {
				this.weightData.height = decodeURIComponent(options.height)
			}
			if (options.measuredTime) {
				this.weightData.measuredTime = decodeURIComponent(options.measuredTime)
			}
			if(options.id){
				console.log(options)
				this.weightId = options.id
				this.getWeight()
				this.queryDateCompare()
			}
		},
		methods: {
			getWeight(){
				getWeight(this.weightId).then(res=>{
					this.weightData = res.data || {}
				}).catch(err=>{
					console.error('获取体重数据失败:', err)
				})
			},
			queryDateCompare(){
				queryDateCompare(this.weightId).then(res=>{
					this.comparisonData = res.data || {}
				})
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #fff;
	}

	.success-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 0 40rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.success-icon {
		width: 120rpx;
		height: 120rpx;
		background-color: #4cd964;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.checkmark {
		color: #fff;
		font-size: 60rpx;
		font-weight: bold;
	}

	.success-text {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.data-card {
		margin: 0 30rpx 24rpx;
		padding: 32rpx;
		background: #FBFBFD;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		position: relative;
	}

	.data-main {
		flex: 1;
		margin-right: 90rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		font-size: 24rpx;
		color: #000;
		justify-content: space-between;
	}

	.info-row:last-child {
		margin-bottom: 0;
	}

	.weight-line {
		display: flex;
		align-items: baseline;
	}

	.weight-line .value {
		font-size: 24rpx;
		font-weight: 600;
		color: #000;
	}

	.weight-line .unit {
		font-size: 24rpx;
		color: #000;
		margin-left: 8rpx;
	}

	.bmi {
		font-size: 24rpx;
		color: #000;
		min-width: 200rpx;
		text-align: right;
	}

	.method {
		min-width: 240rpx;
		text-align: right;
		font-size: 24rpx;
		color: #000;
	}

	.upload-time {
		color: #999;
		font-size: 20rpx;
	}

	.status-tag {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 26rpx;
		border-top-right-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		writing-mode: vertical-lr;
		letter-spacing: 4rpx;
		padding: 20rpx 0;
	}

	.comparison-section {
		background-color: #FBFBFD;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-left: 10px;
		margin-right: 10px;
	}

	.comparison-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.comparison-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.comparison-icon.down {
		background-color: #e8f7f1;
		color: #0BD45B;
	}

	.comparison-icon.up {
		background-color: #ffe8e8;
		color: #EC6666;
	}

	.comparison-content {
		display: flex;
		flex-direction: column;
	}

	.comparison-value {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.comparison-value.down {
		color: #0BD45B;
	}

	.comparison-value.up {
		color: #EC6666;
	}

	.comparison-label {
		font-size: 24rpx;
		color: #999;
	}

	.divider {
		width: 2rpx;
		height: 60rpx;
		background-color: #eee;
		margin: 0 20rpx;
	}
</style>

